window.addEventListener('load',function (){
    let banner=document.querySelector('.banner');
    let banner_ul=document.querySelector('.banner ul');
    let lis=document.querySelectorAll('.banner ul li');
    let ol=document.querySelector('.banner ol');
    banner.addEventListener('mouseenter',function (){
        left_arrow.style.display='block';
        right_arrow.style.display='block';
        clearInterval(timer);
        timer=null;
    });
    banner.addEventListener('mouseleave',function (){
        left_arrow.style.display='none';
        right_arrow.style.display='none';
        timer=setInterval(function (){
            //手动调用点击事件
            right_arrow.click();
        },2000)
    });
    let bannerWidth=banner.offsetWidth;
    //点击箭头按钮滑动
    let left_arrow=document.querySelector('.left_arrow');
    let right_arrow=document.querySelector('.right_arrow');
    let num=0;
    let circle=0;
    //克隆第一个小li 放在ul的最后的位置  深拷贝：克隆该节点并克隆里面的内容
    let cloneFirstLi=banner_ul.children[0].cloneNode(true);
    //把cloneFirstLi放再最后
    banner_ul.appendChild(cloneFirstLi);
    //克隆最后一个小li 放在ul的第一的位置  深拷贝：克隆该节点并克隆里面的内容
    // let cloneLastLi=banner_ul.children[banner_ul.children.length-2].cloneNode(true);
    //把cloneLastLi放到第一的位置
    // banner_ul.insertBefore(cloneLastLi,banner_ul.children[0]);
    //创建小圆点
    //修改ul的大小
    banner_ul.style.width=(lis.length+1)*100+'%';
    for (let i = 0; i < lis.length; i++) {
        let newLis=document.createElement('li');
        ol.append(newLis);
        //给li添加属性index
        newLis.setAttribute('index',i);
        //排他思想
        newLis.addEventListener('click',function (){
            for (let j = 0; j <ol.children.length ; j++) {
                ol.children[j].className='';
            }
            this.className='red';
            let index=this.getAttribute('index');
            //箭头点击与小圆点点击保持一致
            num=circle=index;
            animate(banner_ul,-bannerWidth*index);
        })

    }
    ol.children[0].className='red';

    let flag=true;
    left_arrow.addEventListener('click',function (){
        if(flag){
            flag=false;
            circle--;
            //实现无缝切换
            if(num===0){
                num=banner_ul.children.length-1;
                //把图片回归到最后一张再重新开始
                banner_ul.style.left=-bannerWidth*num+'px';
            }
            num--;
            animate(banner_ul,-bannerWidth*num,function (){
                flag=true;
            });
            // console.log('右侧',num,bannerWidth*num);
            if(circle<0){
                circle=ol.children.length-1;
            }
            circleChange();
        }
    })
    right_arrow.addEventListener('click',function (){
        if(flag){
            //关闭节流阀
            flag=false;
            num++;
            console.log(num)
            circle++;
            //实现无缝切换
            if(num===lis.length+1){
                //把图片回归原位 再重新开始
                banner_ul.style.left='0';
                //图片回归到第2张
                num=1;
            }
            animate(banner_ul,-bannerWidth*num,function (){
                flag=true;
            });
            // console.log('右侧',num,bannerWidth*num);
            if(circle===ol.children.length){
                circle=0;
            }
            circleChange();
        }
    })
    function circleChange(){
        for (let i = 0; i < ol.children.length; i++) {
            ol.children[i].className='';
        }
        ol.children[circle].className='red';
    }
    // 自动轮播
    let timer=setInterval(function (){
        //手动调用点击事件
        right_arrow.click();
    },2000);
    /*  节流阀：
            防止轮播图按钮连续点击造成播放过快
        节流阀的目的：
            当上一个函数动画执行完毕，再去执行下一个函数动画，让事件无法连续触发
        核心实现思路：
            利用回调函数，添加一个变量来控制，锁住函数和解锁函数

     */
});